<template>
  <div class="project-result-container">
    <el-card class="project-card">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Document /></el-icon>
          <span>项目成果信息表单</span>
        </div>
      </template>

      <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-position="top"
          class="project-form"
      >
        <!-- 基础信息分组 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><OfficeBuilding /></el-icon>
            <span>基础信息</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="分类" prop="categoryId">
                <el-select
                    v-model="formData.categoryId"
                    placeholder="请选择分类"
                    clearable
                    size="large"
                    style="width: 100%"
                >
                  <el-option label="全国重点实验室" value="全国重点实验室" />
                  <el-option label="颠覆性技术中心" value="颠覆性技术中心" />
                  <el-option label="校级自主项目" value="校级自主项目" />
                  <el-option label="国家重大专项" value="国家重大专项" />
                  <el-option label="国家自然科学基金" value="国家自然科学基金" />
                  <el-option label="省部级项目" value="省部级项目" />
                  <el-option label="校企合作" value="校企合作" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业名称" prop="orgName">
                <el-input
                    v-model="formData.orgName"
                    placeholder="请输入企业名称"
                    clearable
                    size="large"
                />
              </el-form-item>
            </el-col>


          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="成立时间" prop="regTime">
                <el-date-picker
                    v-model="formData.regTime"
                    type="date"
                    placeholder="请选择成立时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    size="large"
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="注册资金（万元）" prop="regCapital">
                <el-input-number
                    v-model="formData.regCapital"
                    :min="0"
                    :precision="2"
                    placeholder="请输入注册资金"
                    size="large"
                    style="width: 100%"
                    controls-position="right"
                />
              </el-form-item>
            </el-col>

          </el-row>
        </div>

        <!-- 资质与成果分组 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><Medal /></el-icon>
            <span>资质与成果</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="荣誉资质" prop="honorsQualifications">
                <el-select
                    v-model="formData.honorsQualifications"
                    placeholder="请选择荣誉资质"
                    clearable
                    size="large"
                    style="width: 100%"
                >
                  <el-option label="国家高新技术企业" value="国家高新技术企业" />
                  <el-option label="国家科技型中小企业" value="国家科技型中小企业" />
                  <el-option label="创新型中小企业" value="创新型中小企业" />
                  <el-option label="专精特新中小企业" value="专精特新中小企业" />
                  <el-option label="专精特新小巨人企业" value="专精特新小巨人企业" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="成果所处阶段" prop="developmentStage">
                <el-select
                    v-model="formData.developmentStage"
                    placeholder="请选择成果阶段"
                    clearable
                    size="large"
                    style="width: 100%"
                >
                  <el-option label="概念" value="概念" />
                  <el-option label="小试" value="小试" />
                  <el-option label="中试" value="中试" />
                  <el-option label="产业化" value="产业化" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="知识产权" prop="intellectualProperty">
            <el-input
                v-model="formData.intellectualProperty"
                placeholder="请输入知识产权情况，如专利、软著等"
                type="textarea"
                :rows="3"
                maxlength="500"
                show-word-limit
            />
          </el-form-item>

          <el-form-item label="研究成果及简介" prop="researchResultsSummary">
            <el-input
                v-model="formData.researchResultsSummary"
                placeholder="请简要介绍研究成果的核心内容和创新点"
                type="textarea"
                :rows="4"
                maxlength="1000"
                show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 团队信息分组 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><User /></el-icon>
            <span>团队信息</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目负责人/创始人姓名" prop="projectLeaderFounder">
                <el-input
                    v-model="formData.projectLeaderFounder"
                    placeholder="请输入项目负责人或创始人姓名"
                    clearable
                    size="large"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="职称" prop="leaderTitle">
                <el-input
                    v-model="formData.leaderTitle"
                    placeholder="如教授、副教授、研究员等"
                    clearable
                    size="large"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="负责人/创始团队所在单位" prop="leaderAffiliation">
                <el-input
                    v-model="formData.leaderAffiliation"
                    placeholder="如高校、科研院所等"
                    clearable
                    size="large"
                />
              </el-form-item>
            </el-col>
          </el-row>


          <el-form-item label="项目团队简介" prop="teamIntroduction">
            <el-input
                v-model="formData.teamIntroduction"
                placeholder="请介绍团队成员背景、专业特长及项目分工"
                type="textarea"
                :rows="4"
                maxlength="800"
                show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 技术与应用分组 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><SetUp /></el-icon>
            <span>技术与应用</span>
          </div>

          <el-form-item label="技术领域" prop="technicalField">
            <el-select
                v-model="formData.technicalField"
                placeholder="请选择技术领域"
                clearable
                size="large"
                style="width: 100%"
            >
              <el-option label="人工智能" value="人工智能" />
              <el-option label="新材料" value="新材料" />
              <el-option label="生物医药" value="生物医药" />
              <el-option label="高端制造" value="高端制造" />
              <el-option label="新能源" value="新能源" />
              <el-option label="量子信息" value="量子信息" />
              <el-option label="电子信息" value="电子信息" />
              <el-option label="航空航天" value="航空航天" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>

          <el-form-item label="潜在应用行业" prop="potentialIndustries">
            <el-select
                v-model="formData.potentialIndustries"
                placeholder="请选择潜在应用行业"
                clearable
                size="large"
                style="width: 100%"
            >
              <el-option label="电子信息" value="电子信息" />
              <el-option label="航空航天" value="航空航天" />
              <el-option label="医疗器械" value="医疗器械" />
              <el-option label="环保治理" value="环保治理" />
              <el-option label="农业" value="农业" />
              <el-option label="金融" value="金融" />
              <el-option label="交通运输" value="交通运输" />
              <el-option label="能源电力" value="能源电力" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>

          <el-form-item label="应用场景" prop="applicationScenario">
            <el-input
                v-model="formData.applicationScenario"
                placeholder="请详细描述技术可以具体用在什么产品、什么环节、解决什么具体问题"
                type="textarea"
                :rows="4"
                maxlength="800"
                show-word-limit
            />
          </el-form-item>

          <el-form-item label="解决方案" prop="solution">
            <el-input
                v-model="formData.solution"
                placeholder="请阐述该项目如何解决实际问题，核心技术优势是什么"
                type="textarea"
                :rows="4"
                maxlength="1000"
                show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 附件上传分组 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><Paperclip /></el-icon>
            <span>附件材料</span>
          </div>

          <el-form-item label="附件上传" prop="fileId">
            <upload
                v-model="formData.fileId"
                :mode="'default'"
                :text="formData.fileText"
                @onUploadSuccess="handleUploadSuccess"
            />
            <div class="upload-tip">
              <el-icon><InfoFilled /></el-icon>
              支持上传的文件格式：pdf, docx, xlsx, jpg, png, zip等，单个文件不超过50MB
            </div>
          </el-form-item>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button type="primary" size="large" @click="handleSubmit">
            <span>保存</span>
          </el-button>
          <el-button size="large" @click="handleBack">
            <span>返回</span>
          </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import {
  Document,
  OfficeBuilding,
  Medal,
  User,
  SetUp,
  Paperclip,
  InfoFilled,
  Check,
  Close
} from '@element-plus/icons-vue';
import Upload from '/@/views/common/upload.vue';
import { required } from '/@/components/wigem/utils/validateForm';

// 表单数据
const formData = reactive({
  orgName: '',
  categoryId: '',
  regTime: '',
  regCapital: null,
  intellectualProperty: '',
  honorsQualifications: [],
  researchResultsSummary: '',
  developmentStage: '',
  projectLeaderFounder: '',
  leaderTitle: '',
  leaderAffiliation: '',
  teamIntroduction: '',
  technicalField: [],
  potentialIndustries: [],
  applicationScenario: '',
  solution: '',
  fileId: '',
  fileText: ''
});
import {save,getEntity} from "/@/api/project/reserveProject";
import {useRoute} from "vue-router";
// 表单引用
const formRef = ref();
import { useRouter } from "vue-router";
// 校验规则
const formRules = computed(() => ({
  orgName: required({ required: true, message: '请输入企业名称' }),
  categoryId: required({ required: true, message: '请选择分类' }),
  regTime: required({ required: true, message: '请选择成立时间' }),
  regCapital: required({ required: true, message: '请输入注册资金' }),
  honorsQualifications: required({ required: true, message: '请选择荣誉资质' }),
  developmentStage: required({ required: true, message: '请选择成果阶段' }),
  technicalField: required({ required: true, message: '请选择技术领域' })
}));

// 上传成功回调
const handleUploadSuccess = (data: any) => {
  formData.fileText = data.fileName;
  formData.fileId=data.folderId;
  ElMessage.success('附件上传成功');
};

// 提交
const handleSubmit = async () => {
  // 使用 Promise 包装 validate 方法
  const isValid = await new Promise((resolve) => {
    formRef.value?.validate((valid: boolean) => {
      resolve(valid);
    });
  });

  if (!isValid) {
    return;
  }
  try {
    console.log('提交数据：', formData);

    // await 等待 API 调用完成
    const res = await save(formData);
    ElMessage.success('提交成功');

    // 可以在这里返回结果或执行其他操作
    return res;
  } catch (e) {
    console.error('保存失败:', e);
    ElMessage.error(`保存失败: ${e?.message || '未知错误'}`);
    // 可以选择重新抛出错误或返回 null
    throw e;
  }
};

const router = useRouter();
// 取消
const handleBack = () => {
  router.push({
    name: "reserveProject",
    query: {}
  });
};
const init =async () => {
  // 可以在这里进行页面初始化，例如从路由参数获取ID并加载数据
  const route = useRoute();
  const id = route.query.id;
  if (!id) {
    return;
  }
  try {
    const res = await getEntity(id);
    if (!res || !res.data) {
      ElMessage.warning('未获取到数据');
      return;
    }

    // 直接使用 Object.assign 合并数据
    Object.assign(formData, res.data);
  } catch (e) {
    console.error('加载数据失败:', e);
    ElMessage.error(`加载失败: ${e?.message || '未知错误'}`);
  } finally {
  }
};
init();

</script>

<style scoped>
.project-result-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  min-height: 100vh;
}

.project-card {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.header-icon {
  font-size: 24px;
  color: #409eff;
}

.project-form {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 32px;
  padding: 24px;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #e8eef5;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #409eff;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.section-title .el-icon {
  font-size: 20px;
  color: #409eff;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
}

:deep(.el-input__inner),
:deep(.el-textarea__inner) {
  border-radius: 6px;
  transition: all 0.3s;
}

:deep(.el-input__inner:focus),
:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

:deep(.el-select) {
  width: 100%;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 2px solid #e8eef5;
}

.form-actions .el-button {
  min-width: 140px;
  padding: 12px 32px;
  font-size: 15px;
  border-radius: 8px;
  transition: all 0.3s;
}

.form-actions .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #5a9fff 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.form-actions .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

.form-actions .el-button:not(.el-button--primary) {
  border: 1px solid #dcdfe6;
}

.form-actions .el-button:not(.el-button--primary):hover {
  background-color: #f5f7fa;
}

.upload-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #ecf5ff;
  border-radius: 4px;
  font-size: 13px;
  color: #409eff;
}

.upload-tip .el-icon {
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .project-result-container {
    padding: 16px;
  }

  .form-section {
    padding: 16px;
  }

  .form-actions .el-button {
    min-width: 100px;
    padding: 10px 20px;
  }
}
</style>
